<template>
  <div class="app-container home">
    <div class="hero-section">
      <h1 class="hero-title">东营职业学院综合服务平台</h1>
      <p class="hero-subtitle">
        欢迎来到校园综合服务平台，在这里，一站式获取校园信息，让你的校园生活更高效、更温暖～
      </p>
      <div class="hero-buttons">
        <el-button type="primary" size="medium" round class="hero-button" @click="goTarget('https://www.dyxy.edu.cn/')">
          进入官网
        </el-button>
        <!-- <el-button type="success" size="medium" round class="hero-button">
          了解详情
        </el-button> -->
      </div>
    </div>

    <div class="features-section">
      <el-row :gutter="30">
        <el-col :xs="24" :sm="12" :md="8">
          <div class="feature-card">
            <div class="feature-icon">
              <i class="el-icon-user-solid"></i>
            </div>
            <h3 class="feature-title">学生服务</h3>
            <p class="feature-desc">全面的学生信息管理，包括学籍、成绩、奖惩等</p>
          </div>
        </el-col>
        <el-col :xs="24" :sm="12" :md="8">
          <div class="feature-card">
            <div class="feature-icon">
              <i class="el-icon-office-building"></i>
            </div>
            <h3 class="feature-title">教学服务</h3>
            <p class="feature-desc">课程安排、教师管理、教学评估等一体化解决方案</p>
          </div>
        </el-col>
        <el-col :xs="24" :sm="12" :md="8">
          <div class="feature-card">
            <div class="feature-icon">
              <i class="el-icon-data-line"></i>
            </div>
            <h3 class="feature-title">数据分析</h3>
            <p class="feature-desc">多维度数据分析，为决策提供科学依据</p>
          </div>
        </el-col>
      </el-row>
    </div>

    <div class="stats-section">
      <el-row :gutter="30">
        <el-col :span="6">
          <div class="stat-item">
            <div class="stat-number">5000+</div>
            <div class="stat-label">在校学生</div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="stat-item">
            <div class="stat-number">300+</div>
            <div class="stat-label">教职员工</div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="stat-item">
            <div class="stat-number">20+</div>
            <div class="stat-label">专业设置</div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="stat-item">
            <div class="stat-number">98%</div>
            <div class="stat-label">满意度</div>
          </div>
        </el-col>
      </el-row>
    </div>

    <div class="announcement-section">
      <el-card class="announcement-card">
        <div slot="header" class="announcement-header">
          <span>最新公告</span>
          <el-button style="float: right; padding: 3px 0" type="text">更多</el-button>
        </div>
        <div class="announcement-content">
          <ul>
            <li class="announcement-item">
              <i class="el-icon-arrow-right"></i>
              <span>2025年秋季学期开学通知</span>
              <span class="announcement-date">2025-08-20</span>
            </li>
            <li class="announcement-item">
              <i class="el-icon-arrow-right"></i>
              <span>校园网络系统升级维护通知</span>
              <span class="announcement-date">2025-08-15</span>
            </li>
            <li class="announcement-item">
              <i class="el-icon-arrow-right"></i>
              <span>关于新生入学体检安排的通知</span>
              <span class="announcement-date">2025-08-10</span>
            </li>
            <li class="announcement-item">
              <i class="el-icon-arrow-right"></i>
              <span>图书馆暑期开放时间调整</span>
              <span class="announcement-date">2025-07-25</span>
            </li>
          </ul>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
export default {
  name: "Index",
  data() {
    return {
      // 版本号
      version: "3.9.0"
    }
  },
  methods: {
    goTarget(href) {
      window.open(href, "_blank")
    }
  }
}
</script>

<style scoped lang="scss">
.home {
  padding: 20px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  min-height: calc(100vh - 84px);
  color: #333;
  
  .hero-section {
    text-align: center;
    padding: 60px 20px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 15px;
    margin-bottom: 30px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    animation: fadeInUp 0.8s ease-out;
    
    .hero-title {
      font-size: 2.5rem;
      font-weight: 700;
      margin-bottom: 20px;
      color: #2c3e50;
    }
    
    .hero-subtitle {
      font-size: 1.2rem;
      color: #7f8c8d;
      margin-bottom: 30px;
      line-height: 1.6;
    }
    
    .hero-buttons {
      .hero-button {
        margin: 0 10px;
        padding: 12px 30px;
        font-size: 1rem;
        transition: all 0.3s ease;
        
        &:hover {
          transform: translateY(-3px);
          box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
        }
      }
    }
  }
  
  .features-section {
    margin-bottom: 30px;
    animation: fadeInUp 1s ease-out;
    
    .feature-card {
      background: rgba(255, 255, 255, 0.9);
      border-radius: 10px;
      padding: 30px 20px;
      text-align: center;
      transition: all 0.3s ease;
      height: 200px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
      
      &:hover {
        transform: translateY(-10px);
        box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
      }
      
      .feature-icon {
        font-size: 3rem;
        margin-bottom: 15px;
        color: #409EFF;
      }
      
      .feature-title {
        font-size: 1.3rem;
        font-weight: 600;
        margin-bottom: 10px;
        color: #2c3e50;
      }
      
      .feature-desc {
        color: #7f8c8d;
        line-height: 1.5;
      }
    }
  }
  
  .stats-section {
    background: rgba(255, 255, 255, 0.9);
    border-radius: 15px;
    padding: 30px;
    margin-bottom: 30px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    animation: fadeInUp 1.2s ease-out;
    
    .stat-item {
      text-align: center;
      padding: 20px 0;
      
      .stat-number {
        font-size: 2rem;
        font-weight: 700;
        color: #409EFF;
        margin-bottom: 5px;
      }
      
      .stat-label {
        font-size: 1rem;
        color: #7f8c8d;
      }
    }
  }
  
  .announcement-section {
    animation: fadeInUp 1.4s ease-out;
    
    .announcement-card {
      border-radius: 15px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
      border: none;
      
      .announcement-header {
        font-size: 1.2rem;
        font-weight: 600;
        color: #2c3e50;
      }
      
      .announcement-content {
        .announcement-item {
          list-style: none;
          padding: 12px 0;
          border-bottom: 1px solid #eee;
          display: flex;
          align-items: center;
          
          &:last-child {
            border-bottom: none;
          }
          
          i {
            color: #409EFF;
            margin-right: 10px;
          }
          
          span {
            flex: 1;
          }
          
          .announcement-date {
            color: #999;
            font-size: 0.9rem;
          }
        }
      }
    }
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 768px) {
  .home {
    padding: 10px;
    
    .hero-section {
      padding: 30px 15px;
      
      .hero-title {
        font-size: 1.8rem;
      }
      
      .hero-subtitle {
        font-size: 1rem;
      }
    }
    
    .stats-section {
      padding: 15px;
      
      .stat-item {
        padding: 10px 0;
        
        .stat-number {
          font-size: 1.5rem;
        }
      }
    }
  }
}
</style>

